import { Table } from "@/components/table/table";
import { THead } from "@/components//table/thead";
import { TBody } from "@/components//table/tbody";
import { Tr } from "@/components//table/tr";
import { Td } from "@/components//table/td";
import { useState } from "react";
import { encryptPhone } from "@/utils/reg";

export const VerifyList = (): React.ReactElement => {
  const [data] = useState<any[]>([]);

  const copyTextClick = (payload: any): void => {
    navigator.clipboard.writeText(payload);
  };

  return (
    <>
      <Table>
        <THead>
          <Tr>
            <Td>ID</Td>
            <Td>联系方式</Td>
            <Td>归属地</Td>
            <Td>短信</Td>
            <Td>号段</Td>
            <Td>状态</Td>
            <Td>在线时长</Td>
            <Td>操作</Td>
          </Tr>
        </THead>
        <TBody>
          {data.map((item, index) => (
            <Tr key={index}>
              <Td isShadow>{index + 1}</Td>
              <Td isShadow onClick={() => copyTextClick(item.phone)}>
                {encryptPhone(item.phone)}
              </Td>
              <Td isShadow>{item.county}</Td>
              <Td
                isShadow
                onDoubleClick={() => copyTextClick(item.message)}
              >{`【抖音】验证码${item.message.substring(0, 4)}`}</Td>
              <Td isShadow>{item.is_really ? "实号" : "虚号"}</Td>
              <Td isShadow>{item.status ? "登录成功" : "登录失败"}</Td>
              <Td isShadow>{item.online_time}</Td>
              <Td isShadow>删除</Td>
            </Tr>
          ))}
        </TBody>
      </Table>
    </>
  );
};
